<template>

  <div>
    <div class="mdui-chip" style="margin-left: 16px;margin-top: 16px;margin-bottom: 16px" v-on:click="change_mode(1)">
      <span class="mdui-chip-title">下单时间正序</span>
    </div>
    <div class="mdui-chip" style="margin-left: 16px;margin-top: 16px;margin-bottom: 16px" v-on:click="change_mode(2)">
      <span class="mdui-chip-title">下单时间倒序</span>
    </div>
  <div class="mdui-table-fluid">
    <table class="mdui-table mdui-table-hoverable">
      <thead>
      <tr>

        <th>订单id</th>
        <th>用户id</th>
        <th>商品id</th>
        <th>商品名称</th>
        <th>金额</th>
        <th>下单时间</th>
      </tr>
      </thead>
      <tbody>

      <tr v-for="(item) in data" v-on:click="show(item)">
        <td>{{item.id}}</td>
        <td>{{item.用户id}}</td>
        <td>{{item.商品id}}</td>
        <td>{{item.商品名称}}</td>
        <td>{{item.价格}}</td>
        <td>{{item.下单时间}}</td>
      </tr>




      </tbody>
    </table>
    <div class="mdui-dialog" id="order_list_dialog">
      <div class="mdui-dialog-title">订单详情</div>
      <div class="mdui-dialog-content">
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">状态</label>
          {{state}}
        </div>
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">id</label>
          {{id}}
        </div>
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">用户id</label>
          <a :href="'http://www.baidu.com/#'+user_id">{{user_id}}</a>
        </div>
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">商品id</label>
          <a :href="'http://www.baidu.com/#'+commodity_id">{{commodity_id}}</a>
        </div>
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">商品名称</label>
         {{commodity_name}}
        </div>

        <div class="mdui-textfield">
          <label class="mdui-textfield-label">金额</label>
          {{price}}
        </div>
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">下单时间</label>
          {{create_time}}
        </div>
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">收货人</label>
          {{receiver}}
        </div>
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">手机号</label>
          {{phone_number}}
        </div>
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">收货地址</label>
          {{address}}
        </div>
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">物流名称</label>
          {{express_name}}
        </div>
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">物流单号</label>
          {{express_id}}
        </div>
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">发货时间</label>
          {{express_time}}
        </div>

      </div>


    </div>
    <div class="mdui-dialog" id="order_list_dialog2">
      <div class="mdui-dialog-title">订单发货</div>
      <div class="mdui-dialog-content">
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">收货人</label>
          {{receiver}}
        </div>
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">手机号</label>
          {{phone_number}}
        </div>
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">收货地址</label>
          {{address}}
        </div>
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">物流名称</label>
          <input class="mdui-textfield-input" type="text" v-model="in_express_name"/>
        </div>
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">物流单号</label>
          <input class="mdui-textfield-input" type="text" v-model="in_express_id"/>
        </div>

      </div>
      <div class="mdui-dialog-actions">
        <button class="mdui-btn mdui-ripple" v-on:click="push">确定</button>
      </div>

    </div>


  </div>
  </div>

</template>

<script>
  import * as mdui from "mdui";
  import axios from "axios";
  import qs from "qs";
  import jm from "./../../static/jm"

  const BASE_URL = 'http://127.0.0.1:8886';

  export default {
    name: 'login',
    data () {
      return {
        token: '',
        data:[],
        name:'',
        inst:'',
        inst2:'',
        mode:1,

        state:'',
        id:'',
        user_id:'',
        commodity_id:'',
        commodity_name:'',
        create_time:'',
        express_name:'',
        express_id:'',
        express_time:'',
        price:'',

        in_express_name:'',
        in_express_id:'',

        receiver:'',
        phone_number:'',
        address:''
      }
    },
    methods:{
      getpar(par){
        //获取当前URL
        let local_url = document.location.href;
        //获取要取得的get参数位置
        let get = local_url.indexOf(par + "=");
        if (get == -1) {
          return "";
        }
        //截取字符串
        let get_par = local_url.slice(par.length + get + 1);
        //判断截取后的字符串是否还有其他get参数
        let nextPar = get_par.indexOf("&");
        if (nextPar != -1) {
          get_par = get_par.slice(0, nextPar);

        }
        nextPar = get_par.indexOf("?");
        if (nextPar != -1) {
          get_par = get_par.slice(0, nextPar);
        }
       nextPar = get_par.indexOf("#");
        if (nextPar != -1) {
          get_par = get_par.slice(0, nextPar);
        }
        return decodeURI(get_par);
      },
      change_mode(mode){
        this.mode=mode;
        this.getdata();

      },
      show(item){
        if(this.getpar('state')!=='1') {
          this.id = item.id;
          this.user_id = item.用户id;
          this.commodity_id = item.商品id;
          this.commodity_name = item.商品名称;
          this.price = item.价格;
          this.create_time = item.下单时间;
          this.express_name = item.物流名称;
          this.express_id = item.物流单号;
          this.express_time = item.发货时间;
          this.receiver=item.收货人;
          this.phone_number=item.手机号;
          this.address=item.收货地址;
          if (item.状态 == 0)
            this.state = '待付款';
          else if (item.状态 == 1)
            this.state = '待发货';
          else if (item.状态 == 2)
            this.state = '待收货';
          else if (item.状态 == 3)
            this.state = '待评价';
          else if (item.状态 == 4)
            this.state = '已完成';
          else if (item.状态 == 10)
            this.state = '已取消';
          this.inst.open();
        }
        else
        {
          this.id = item.id;
          this.in_express_id='';
          this.in_express_name='';
          this.receiver=item.收货人;
          this.phone_number=item.手机号;
          this.address=item.收货地址;
          this.inst2.open();
        }


      },
      push(){
        this.token=window.localStorage.getItem("token");
        axios.post(BASE_URL +'/order/cearte_express_order',
          qs.stringify({token:this.token,id:this.id,express_name:this.in_express_name,express_id:this.in_express_id}),
          {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
          .then(re => {
            if(re.data.状态码===200)
            {



              this.inst2.close();
              this.getdata();
              this.$parent.get_order_type_sum();

            }
            else
            {
              this.inst2.close();
              if(re.data.备注==='token无效') {
                this.token = window.localStorage.setItem("token", "");
                this.$router.push("/login");
              }
              else
                mdui.default.alert(re.data.备注);
            }
          })
          .catch(err=>{
            this.inst2.close();
            mdui.default.alert("网络错误");

          });
      },
      getdata(){
        this.token=window.localStorage.getItem("token");
        axios.post(BASE_URL +'/order/admin_get_order_list_for_state',
          qs.stringify({token:this.token,state:this.getpar('state'),mode:this.mode}),
          {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
          .then(re => {
            if(re.data.状态码===200)
            {

              this.data=re.data.列表;

            }
            else
            {
              if(re.data.备注==='token无效') {
                this.token = window.localStorage.setItem("token", "");
                this.$router.push("/login");
              }
              else
                mdui.default.alert(re.data.备注);
            }
          })
          .catch(err=>{
            mdui.default.alert("网络错误");

          });
      },
      fff()
      {
        this.getdata();
      }
    },
    watch: {
      // 如果路由有变化，会再次执行该方法
      "$route": "fff"
    },
    mounted() {

      this.token=window.localStorage.getItem("token");
      if(this.token!=null&&this.token.length==64) {
        this.getdata();
        this.inst = new mdui.default.Dialog('#order_list_dialog');
        this.inst2 = new mdui.default.Dialog('#order_list_dialog2');
      }
    }
  }
</script>
